<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>雄安保府酒业</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">

    <!-- Navbar -->
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <!-- Left navbar links -->
        <ul class="navbar-nav">

<!--            <li class="nav-item">-->
<!--                <a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a>-->
<!--            </li>-->
        </ul>

        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="/index"><i class="fas fa-home"></i>主页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/login"><i class="fas fa-sign-out-alt"></i>退出登录</a>
            </li>
        </ul>
    </nav>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Brand Logo -->
        <a href="/index" class="brand-link">
            <img src="/favicon.ico" alt="AdminLTE Logo" class="brand-image  elevation-3"
                 style="opacity: 0.9">
            <span class="brand-text font-weight-light">雄安保府酒业</span>
        </a>

        <!-- Sidebar -->
        <div class="sidebar">
            <!-- Sidebar user panel (optional) -->
<!--            <div class="user-panel mt-3 pb-3 mb-3 d-flex">-->
<!--                <div class="image">-->
<!--                    <img src="../dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">-->
<!--                </div>-->
<!--                <div class="info">-->
<!--                    <a href="#" class="d-block">Alexander Pierce</a>-->
<!--                </div>-->
<!--            </div>-->

            <!-- Sidebar Menu -->
            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
                    data-accordion="false">
                    <!-- Add icons to the links using the .nav-icon class
                         with font-awesome or any other icon font library -->
                    <li class="nav-item">
                        <a href="/userList" class="nav-link">
                            <i class="nav-icon fas fa-users-cog"></i>
                            <p>
                                用户管理
                            </p>
                        </a>
                    </li>
                    <li class="nav-item active">
                        <a href="/orderList" class="nav-link">
                            <i class="nav-icon fas fa-users-cog"></i>
                            <p>
                                订单管理
                            </p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="/probabilityList" class="nav-link">
                            <i class="nav-icon fas fa-users-cog"></i>
                            <p>
                                中奖概率设置
                            </p>
                        </a>
                    </li>
                    <li class="nav-item active">
                        <a href="/activeTimeList" class="nav-link">
                            <i class="nav-icon fas fa-users-cog"></i>
                            <p>
                                活动设置
                            </p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="/dailyLimitList" class="nav-link">
                            <i class="nav-icon fas fa-users-cog"></i>
                            <p>
                                每日奖品上限设置
                            </p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="/shareMsgList" class="nav-link">
                            <i class="nav-icon fas fa-users-cog"></i>
                            <p>
                                分享文案设置
                            </p>
                        </a>
                    </li>
                </ul>
            </nav>
            <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
<!--        <div class="content-header">-->
<!--            <div class="container-fluid">-->
<!--                <div class="row mb-2">-->
<!--                    <div class="col-sm-6">-->
<!--                        <h1 class="m-0 text-dark">欢迎页</h1>-->
<!--                    </div>&lt;!&ndash; /.col &ndash;&gt;-->
<!--                </div>&lt;!&ndash; /.row &ndash;&gt;-->
<!--            </div>&lt;!&ndash; /.container-fluid &ndash;&gt;-->
<!--        </div>-->
        <!-- /.content-header -->
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card card-primary card-outline">
                            <div class="card-header">
                                <h3 class="card-title">订单管理</h3>
                                <div class="card-tools">
                                    <div class="demoTable">
                                        <select class="layui-inline" id="statusSelector">
                                            <option selected="selected" value="-1">全部</option>
                                            <option value="0">未领取</option>
                                            <option value="1">已领取</option>
                                        </select>
                                        <div class="layui-inline">
                                            <input placeholder="订单号或电话" class="layui-input" name="id" id="keyword" autocomplete="off">
                                        </div>
                                        <button id = "reloadButton" class="layui-btn" data-type="reload">搜索</button>
                                    </div>
                                </div>
<!--                                <div class="card-tools">-->
<!--                                    <button type="button" class="btn btn-tool" data-card-widget="collapse"><i-->
<!--                                            class="fas fa-minus"></i>-->
<!--                                    </button>-->
<!--                                </div>-->
                            </div>
                            <div class="card-body">
                                <table class="layui-table" id="orderTable" lay-filter="orderTable"></table>
                            </div>
                            <!-- /.card-body -->
                        </div>
                    </div>
                    <!-- /.col-md-6 -->
                </div>
                <!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
    </div>


    <footer class="main-footer">
        <strong>Copyright &copy; 2014-2019 <a href="">雄安保府酒业</a>.</strong>
        All rights reserved.
        <div class="float-right d-none d-sm-inline-block">
            <b>Version</b> 1.0
        </div>
    </footer>
</div>


<script src="../com.js"></script>

<!--<script type="text/html" id="status">-->
<!--    {{#  if(d.lotteryed == 1){ }}-->
<!--    <span style="color: #1AB394;">已抽奖</span>-->
<!--    {{#  } else if(d.lotteryed == 0) { }}-->
<!--    <span style="color: #0000ff;">可抽奖</span>-->
<!--    {{#  } else if(d.lotteryed == -1) { }}-->
<!--    <span style="color: #0000ff;">不能抽奖</span>-->
<!--    {{#  } }}-->
<!--</script>-->

<script type="text/html" id="button">
    {{# if(d.claimed == 1){ }}
    <span>已核销</span>
    {{# }else{ }}
    <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="claim">核销</button>
    {{# } }}
    <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="getOpen">查看</button>
</script>

<script type="text/html" id="claimed">
    {{# if(d.claimed == 1){ }}
    <span style="color: red;">已领奖</span>
    {{# }else{ }}
    <span style="color: mediumblue;">未领奖</span>
    {{# } }}
</script>
<script type="text/html" id="win">
    {{# if(d.pId ==1){ }}
    <span style="color: red;">一等奖</span>
    {{# }else if(d.pId ==2){ }}
    <span style="color: red;">二等奖</span>
    {{# }else if(d.pId ==3){ }}
    <span style="color: red;">三等奖</span>
    {{# } }}  
</script>
<script type="text/javascript">
    var table = layui.table;
    //第一个实例
    table.render({
        elem: '#orderTable'
        , height: 680
        , url: '/back/orderList' //数据接口
        , request: {
            pageName: 'pageNum' //页码的参数名称，默认：page
            , limitName: 'pageSize' //每页数据量的参数名，默认：limit
        }
        , id: 'testReload'
        , page: true //开启分页
        , where : {
            text : ""
            ,claimed : -1
        }
        , cols: [[ //表头
            {field:'id', title:'订单id'}
            ,{field:'orderNum', title:'订单号'}
            ,{field:'contactName', title:'联系人姓名'}
            ,{field:'contactMobile', title:'联系人电话'}
            ,{field:'contactAddress', title:'联系人地址'}
            ,{field:'created', title:'订单生成时间', templet: "<div>{{layui.util.toDateString(d.created, 'yyyy-MM-dd HH:mm:ss')}}</div>"}
            ,{field:'claimed', title:'是否领奖', toolbar: '#claimed'}
            ,{field:'pId', title:'中奖类别', toolbar: '#win'}
            ,{title: '操作', toolbar: '#button', align: 'center'}
        ]]
    });

    var $ = layui.$, active = {
        reload: function(){
            var keyword = $('#keyword');
            var statusSelector = $('#statusSelector');
            //执行重载
            table.reload('testReload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                    text : keyword.val()
                    ,claimed : statusSelector.val()
                }
            }, 'data');
        }
    };

    $('.demoTable .layui-btn').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });

    // //监听行双击事件（单击事件为：row）
    // table.on('rowDouble(demo)', function (obj) {
    //     var data = obj.data;
    //     // if (data.signStatus == 10 && userRoleType == 1) {
    //     //     $("#serialNum").prop("value", data.serialNum);
    //     //     document.form.submit();
    //     // } else {
    //     //     window.location.href = '/page/userForm?id=' + data.id;
    //     // }
    //     //标注选中样式
    //     obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
    // });
    //
    table.on('tool(orderTable)', function (obj) {
        var data = obj.data;
        var layEvent = obj.event;
        if (layEvent == 'claim') {
            var managerAccount = localStorage.getItem("managerAccount");
            if (managerAccount == null || managerAccount == ''){
                alert("身份验证出现错误，请重新登陆");
                window.location.href="/login";
            }else{
                doClaim(data.id);
            }
        }else if(layEvent == 'getOpen'){
            $.ajax({
                url: "/user/getUserOrder",
                method: "get",
                data: data,
                dataType: "json",
                success: function (data) {
                    console.log(data)
                    layer.open({
                        type: 1
                        , title: '查看'
                        , area: ['800px', '580px']
                        , shade: 0
                        , maxmin: true
                        , content: '<div class="site-text" style="padding: 30px">\n' +
                            '        <div class="layui-form-item">\n' +
                            '          <label class="layui-form-label">订单号</label>\n' +
                            '          <div class="layui-input-block">\n' +
                            '            <input type="text" disabled="disabled"  name="title" required="" lay-verify="required" autocomplete="off" class="layui-input" value='+ data.data.orderNum +'>\n' +
                            '          </div>\n' +
                            '        </div>\n' +
                            '        <div class="layui-form-item">\n' +
                            '          <label class="layui-form-label">姓名</label>\n' +
                            '          <div class="layui-input-block">\n' +
                            '            <input type="text" disabled="disabled" name="title" required="" lay-verify="required"  autocomplete="off" class="layui-input" value='+ data.data.contactName+'>\n' +
                            '          </div>\n' +
                            '        </div>\n' +
                            '        <div class="layui-form-item">\n' +
                            '          <label class="layui-form-label">电话</label>\n' +
                            '          <div class="layui-input-block">\n' +
                            '            <input type="text" name="title" disabled="disabled" required="" lay-verify="required"  autocomplete="off" class="layui-input" value='+ data.data.contactMobile+'>\n' +
                            '          </div>\n' +
                            '        </div>\n' +
                            '        <div class="layui-form-item">\n' +
                            '          <label class="layui-form-label">奖品</label>\n' +
                            '          <div class="layui-input-block">\n' +
                            '            <input type="text" name="title" disabled="disabled" required="" lay-verify="required" autocomplete="off" class="layui-input" value='+ data.data.prizeName+'>\n' +
                            '          </div>\n' +
                            '        </div>\n' +
                            '        <div class="layui-form-item">\n' +
                            '          <label class="layui-form-label">数量</label>\n' +
                            '          <div class="layui-input-block">\n' +
                            '            <input type="text" name="title" disabled="disabled" required="" lay-verify="required"  autocomplete="off" class="layui-input" value='+ data.data.prizeNum+'>\n' +
                            '          </div>\n' +
                            '        </div>\n' +
                            '        <div class="layui-form-item">\n' +
                            '          <label class="layui-form-label">价格</label>\n' +
                            '          <div class="layui-input-block">\n' +
                            '            <input type="text" name="title" disabled="disabled" required="" lay-verify="required"  autocomplete="off" class="layui-input" value='+ data.data.prizeValue+'>\n' +
                            '          </div>\n' +
                            '        </div>\n' +
                            '        <div class="layui-form-item">\n' +
                            '          <label class="layui-form-label">地址</label>\n' +
                            '          <div class="layui-input-block">\n' +
                            '            <input type="text" name="title" disabled="disabled" required="" lay-verify="required"  autocomplete="off" class="layui-input" value='+ data.data.contactAddress+'>\n' +
                            '          </div>\n' +
                            '        </div>\n' +
                            '        </div>\n'
                        , btn: ['提交', '关闭'] //只是为了演示
                        , yes: function () {
                            layer.closeAll();
                        }
                        , btn2: function () {
                            layer.closeAll();
                        }
                        , zIndex: layer.zIndex //重点1
                        , success: function (layero) {
                            layer.setTop(layero); //重点2
                        }
                    });
                    console.log(data);
                },
                error: function (data) {
                    alert("异常")
                }
            });
        }
    })

    /**
     * ajax删除
     * @param id
     */
    function doClaim(orderId) {
        $.ajax({
            url: "/back/claimOrder",
            data: {"orderId" : orderId},
            type: "POST",
        })
            .done(function( result ) {
                alert(result);
            })
            .fail(function( xhr, status, errorThrown ) {
                alert( "Sorry, there was a problem!" );
                console.log( "Error: " + errorThrown );
                console.log( "Status: " + status );
                console.dir( xhr );
            })
            .always(function( xhr, status ) {
                window.location.reload();
            });
    }
</script>
</body>
</html>
